@import url(./platePage.css);

.wrap {
    padding-bottom: 45px;
}

body {
    background-color: #f0f0f0;
}

header {
    span {
        width: max-content;
    }
}

.wrap {
    .title {
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 28px;
        line-height: 28px;
        color: #323232;
        padding: 5px 12px 0;

        i {
            display: block;
            background: url('../imgs/plateMainPage-icon.png') no-repeat -185px -71px;
            background-size: 283px 139px;
            width: 16px;
            height: 16px;
        }
    }

    .date {
        background-color: #fff;
        height: 22px;
        line-height: 22px;
        font-size: 12px;
        color: #bdbdbd;
        padding: 0 12px;
    }

    .details {
        background-color: #fff;
        height: 26px;
        line-height: 26px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px 4px;
        font-size: 12px;

        .left {
            display: flex;
        }

        .right {
            display: flex;

            a {
                color: #969696;

                &::after {
                    content: "";
                    display: inline-block;
                    background: url('../imgs/plateMainPage-icon.png') no-repeat -195px -123px;
                    background-size: 283px 139px;
                    width: 6px;
                    height: 10px;
                    margin-left: 5px;
                }
            }
        }

        .seek,
        .msg,
        .praise {
            margin-right: 9px;
            color: #323232;

            &::before {
                content: "";
                display: inline-block;
                background: url('../imgs/plateMainPage-icon.png') no-repeat -164px -6px;
                background-size: 283px 139px;
                width: 16px;
                height: 11px;
                margin-right: 5px;
            }
        }

        .msg::before {
            background: url('../imgs/plateMainPage-icon.png') no-repeat -220px -5px;
            background-size: 283px 139px;
            width: 13px;
            height: 13px;
        }

        .praise::before {
            background: url('../imgs/plateMainPage-icon.png') no-repeat -257px -5px;
            background-size: 283px 139px;
            width: 13px;
            height: 13px;
        }

    }

    .poster {
        background-color: #fff;
        padding: 0 12px;

        .box {
            padding: 12px 0 10px;
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #e0e0e0;
        }

        .left {
            width: max-content;
            display: flex;

            .icon {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 10px;
            }

            .name {
                height: 21px;
                line-height: 21px;
                color: #323232;
                font-size: 15px;
                margin-bottom: 4px;
            }

            .sex {
                height: 15px;
                line-height: 15px;
                background: #1dc8f0;
                border-radius: 5px;
                color: #fff;
                text-align: center;

                em {
                    display: inline-block;
                    background: url('../imgs/man-woman.png') no-repeat 0 0;
                    background-size: 10px 81px;
                    width: 10px;
                    transform: scale(1.3);
                    height: 11px;
                }

                span {
                    display: inline-block;
                    transform: scale(.7);
                }
            }
        }

        .right {
            line-height: 17px;
            font-size: 12px;
            height: 17px;

            span {
                color: #0cc85c;
            }
        }
    }

    .post-content {
        background-color: #fff;

        .text-img {
            padding: 15px 12px;
            border-top: 1px solid #e7e7e7;
            border-bottom: 1px solid #e7e7e7;
        }

        .text {
            line-height: 20px;
            color: #646464;
            font-size: 15px;
        }

        .imgs {
            margin-top: 49px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .img {
            margin-top: 5px;
            width: calc((100% - 10px)/3);
            border-radius: 5px;
            overflow: hidden;

            &:nth-child(-n + 3) {
                margin-top: 0;
            }
        }
    }

    .exceptional {
        background-color: #fff;
        padding: 12px;
        display: flex;
        justify-content: space-between;

        .right {
            margin-top: 3px;

            i {
                display: inline-block;
                background: url('../imgs/more.png') no-repeat 0 0;
                background-size: 21px 5px;
                width: 21px;
                height: 5px;
            }
        }

        .left {
            flex: 1;
            display: flex;
            overflow: hidden;
            margin-right: 40px;
        }

        .sum {
            margin-right: 8px;
        }

        .users {
            overflow-y: hidden;
            overflow-x: scroll;
            display: flex;

            .icon {
                margin-right: 5px;
            }

            &::-webkit-scrollbar,
            &::-webkit-scrollbar-thumb {
                width: 0;
                height: 0;
            }
        }

        .icon {
            width: 36px;
            text-align: center;

            img {
                border-radius: 50%;
                width: 36px;
                height: 36px;
                margin-bottom: 9px;
            }

            span {
                color: #323232;
                font-size: 12px;
                display: inline-block;
            }
        }
    }

    .comments {
        margin-top: 10px;
        background-color: #fff;

        .head {
            font-size: 14px;
            height: 38px;
            line-height: 38px;
            padding: 0 12px;

            h4 {
                color: #646464;
            }
        }


        .msg-publish {
            display: flex;
            padding: 12px;
            border-top: 1px solid #f2f2f2;


            .icon {
                width: 46px;
                height: 46px;
                border-radius: 50%;
                overflow: hidden;
            }

            .text {
                flex: 1;
                margin-left: 10px;
            }

            .msg-title {
                display: flex;
                justify-content: space-between;
                margin-bottom: 2px;

                span {
                    display: block;
                    color: #343434;
                    height: 22px;
                    line-height: 22px;
                    font-size: 15px;
                }

                small {
                    font-size: 12px;
                    color: #0cc85c;
                }
            }

            .age {
                background-color: #1dc8f0;
                height: 16px;
                line-height: 16px;
                border-radius: 3px;
                width: max-content;
                color: #fff;
                padding: 0 4px;

                span {
                    display: inline-block;
                    transform: scale(.7);
                    margin-left: -4px;

                    &::before {
                        content: "";
                        display: inline-block;
                        background: url('../imgs/man-woman.png') no-repeat 0 0;
                        background-size: 10px 81px;
                        width: 10px;
                        height: 11px;
                    }
                }
            }

            .woman {
                background-color: #f452a2;

                &::before {
                    background: url('../imgs/man-woman.png') no-repeat 0 -70px;
                    background-size: 10px 81px;
                    width: 8px;
                    height: 11px;
                }
            }

            .time {
                font-size: 12px;
                color: #bebebe;
                height: 28px;
                line-height: 28px;
                margin-bottom: 5px;
            }

            .content {
                color: #323232;
                line-height: 20px;
                margin: 11px 0 0;
                font-size: 15px;
            }


        }

        .msg-reply {
            .reply {
                background-color: #f0f0f0;
                padding: 5px 10px;
                border-radius: 4px;

                h5 {
                    font-weight: normal;
                    color: #969696;
                    height: 31px;
                    line-height: 31px;
                }

                p {
                    color: #646464;
                    line-height: 20px;
                    padding: 4px 0 5px;
                    font-size: 15px;
                }
            }



        }


    }

    .nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 750px;
        min-width: 320px;
        margin: auto;

        height: 45px;
        line-height: 45px;
        box-sizing: border-box;
        border-top: 1px solid #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 10;
        background-color: #fff;
        padding: 0 8px 0 10px;

        .left {
            display: flex;
            align-items: center;

            a {
                margin-right: 18px;
            }
        }

        .middle {
            display: flex;
            align-items: center;

            p {
                margin: 0 28px;
                color: #323232;
                font-size: 12px;

                span {
                    color: #0cc85c;
                }
            }
        }

        .right {
            a {
                display: block;
                width: 76px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                border-radius: 15px;
                background-color: #f0f0f0;
                font-size: 12px;
                color: #9b9b9b;
            }
        }

        .model {
            background: url('../imgs/plateMainPage-icon.png') no-repeat 0 -113px;
            background-size: 283px 139px;
            width: 26px;
            height: 26px;
            display: inline-block;
        }

        .like {
            display: inline-block;
            background: url('../imgs/plateMainPage-icon.png') no-repeat -45px -114px;
            background-size: 283px 139px;
            width: 26px;
            height: 23px;
        }

        .praise {
            display: inline-block;
            background: url('../imgs/plateMainPage-icon.png') no-repeat -90px -113px;
            background-size: 283px 139px;
            width: 26px;
            height: 26px;
        }

        .prev {
            display: inline-block;
            background: url('../imgs/plateMainPage-icon.png') no-repeat -14px -56px;
            background-size: 283px 139px;
            width: 8px;
            height: 14px;

            &.con {
                background-position: -10px 0;
            }
        }

        .next {
            background: url('../imgs/plateMainPage-icon.png') no-repeat -108px 0;
            background-size: 283px 139px;
            width: 8px;
            display: inline-block;
            height: 14px;

            &.con {
                background-position: -111px -56px;
            }
        }
    }


}